//第十一章 dom扩展

//1.选择器API;通过css选择器查找元素

//查找匹配的第一个项
var ele1 = document.querySelector("#container"); //传入一个css选择器,返回第一个匹配的元素
var ele2 = document.querySelector(".myCls");//查找class属性为myCls的第一个元素
var span = document.querySelector("span.myText"); // 获取class是myText的span元素
console.log('span=',span);

//查找匹配的所有项
var spans  = document.querySelectorAll('span.myText');// 获取class是myText的所有span元素
console.log('spans=',spans);

function clickBtn() {
    var div = document.getElementById("container");
    div.id = 'container2'; 
    
}

//html5 新增的操作方法

/*
document.getElementsByClassName();//根据class属性值返回元素集合 document和element都具有该方法
document.getElementsByClassName('cls1 cls2'); //可以传入多个类名空格隔开
*/

/*
所有元素添加
classList 属性。这个classList 属性是新集合类型DOMTokenList 的实例。
这个属性对于操作一个元素中的多个类非常高效:
属性的主要方法:
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

*/
var div = document.getElementById("container");
var isPanel = div.classList.contains('panel');
console.log('isPanel=',isPanel);

document.head //H5新增

//H5的焦点管理

var btn = document.getElementById('changeClr');
btn.focus();//设置为当前焦点
var activeEle = document.activeElement; //获取当前获得焦点的元素(文档加载完成后默认是body)
var isFocus = document.hasFocus(); //判断文档是否获得了焦点(只能判断文档;通过该判断可以知道用户是正在和该页面进行交互)
console.log('activeEle=',activeEle,'isFocus=',isFocus);

var n = 1;
var ret = n << 3;

console.log('ret=',ret,ret.toString(2));
ret = ret | n << 2;
console.log('ret2 =',ret,ret.toString(2));

//获取自定义属性集合

// DOMStringMap实例
var dataset = div.dataset; //所有以 data- 开头的自定义属性集合都在这个字典里面键是属性名去掉data-之后的值
console.log('dataset=',dataset);

//innerHTML属性 会输出元素下的所有节点，是完整的html文本格式
//console.log(div.innerHTML);
console.log(div.innerText);//输出节点和子节点下的所有文本内容，没有html标签的内容

var ret = document.documentElement.compareDocumentPosition(document.body);
console.log("ret=",ret,(ret & 8));

//H5滚动可见
div.scrollIntoView(true); //表示尽可能顶部对齐，false如果有可能就底部对齐
//div.style.cssText = "width: 800px; height: 500px; background-color: green";
var cuStyle = document.defaultView.getComputedStyle(div);//获取所有样式内容
// div.currentStyle ie中可以获取到所有样式
var len = cuStyle.length;
for (let i = 0; i < len; i++) {
    var prop = cuStyle[i]; //标准的css属性名 非驼峰式的js字段名
    var val = cuStyle.getPropertyValue(prop);    
    //console.log('prop=',prop,'val=',val);
    
}